<template>
	<view class="category-content" :style="{height: `${height}px`}">
		<view class="wrap">
			<view class="style-one">
				<left-aside />
				<view class="right-warp">
					<cate-goods v-if="height" :scroll-height="$px2rpx(height)" :fieldShowHide="fieldShowHide"
						:fieldStyles="styles" :content="content" :search="search" :goodsStyle="brandCardStyle" />
				</view>
			</view>
		</view>
	</view>
</template>

<script type="text/javascript">
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		apiGoodsCategory,
	} from '@/api/goods'
	import category1 from './category1.js'
	import leftAside from './left-aside.vue'
	import cateGoods from './goods.vue'
	export default {
		name: 'category',
		mixins: [MescrollMixin, category1],
		components: {
			leftAside,
			cateGoods
		},
		props: {
			content: {
				type: [Object, Array]
			},
			styles: {
				type: [Object, Array]
			},
			height: {
				type: Number,
				default: 0
			},
			search: {
				type: [Object, Array],
				default: {}
			},
			brandCardStyle: {
				type: String,
				default: 'square'
			}
		},
		data() {
			return {
				lists: [],
				selectIndex: -1,
				selectIndex2: -1,
				refreshTabs: true,
				category_def_id: ''
			}
		},
		methods: {
			getLists() {
				apiGoodsCategory({
					brand_id: this.search.brand_id
				}).then(res => {
					this.lists = this.$zhTran(res.lists)
					if (this.category_def_id != '' && (this.search.brand_id == undefined || this.search.brand_id ==
							'')) {
						var selectIndex = this.lists.findIndex(item => item.id == this.category_def_id)
						this.selectIndex = !selectIndex ? 0 : selectIndex
					} else {
						this.selectIndex = 0
						if (this.content.style == 9)
							this.selectIndex2 = 0
					}
				})
			},
		},
		watch: {
			selectIndex(val) {
				this.parent1.category_id = this.lists[val].id || 0
				if (this.content.style == 9) {
					this.selectIndex2 = 0
					this.refreshTabs = false
					this.$nextTick(function() {
						this.refreshTabs = true;
					})
				}
			},
			selectIndex2(val) {
				this.parent1.category_id = this.lists[this.selectIndex].sons[val].id || 0;
			},
		},
		computed: {
			fieldShowHide() {
				var c = {
					...this.content
				}
				delete c.data
				return c
			},
		},

		created() {
			const options = this.$Route.query
			this.category_def_id = options.id || ''

			this.getLists()
		}
	};
</script>
<style lang="scss" scoped>
	.category-content {
		flex: 1;
		min-width: 0;
		min-height: 0;
		/* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) */
		display: flex;
		flex-direction: column;
		height: 100%;

		.wrap {
			min-width: 0;
			min-height: 0;
			/* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) */
			display: flex;
			flex: 1;
			height: 100%;

			.style-one {
				flex: 1;
				min-width: 0;
				min-height: 0;
				/* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) */
				display: flex;
				width: 750rpx;
				// height: 100%;
				height: calc(100% -200rpx) !important;
				position: fixed;
				z-index: 999999;

				// 右边
				.right-warp {
					flex: 1;
					// min-width: 0;
					// height: 100%;
				}
			}
		}
	}
</style>